import { Grid } from '@arco-design/web-react';
import { memo, ReactNode } from "react";
import DescriptionItem from "../DescriptionItem";
const Row = Grid.Row;
const Col = Grid.Col;

interface IProps {
    data: {
        items: {
            title: ReactNode;
            content: ReactNode;
        }[]
    }[];
}

/**
 * 信息展示
 */
function Descriptions({
    data
}: IProps) {
    return (
        <div className="descriptions">
            {
                data.map((d, idx) => (
                    <Row key={idx}>
                        {
                            d.items.map((item, itemIdx) => (
                                <Col key={itemIdx} span={12}>
                                    <DescriptionItem title={item.title} content={item.content} />
                                </Col>
                            ))
                        }
                    </Row>
                ))
            }
        </div>
    );
}

export default memo(Descriptions);